Reader
You are here: Home / Archives for JavaScript

Detect Mobile Devices on Front-End and Back-end

Last updated on by Gabriel Livan

UPDATE: Webucator created a video about this library. If you’re a visual person, I’m sure you’ll like it 😉 Check it out here!

Depending on each ones needs, we often need ways to detect if our visitors are using an iPad, a smartphone or any other mobile device in order to make out website responsive and even faster by reducing data load. The following are a bunch of classes and snippets you can use to accomplish that, either on the back-end (server side) or on the front-end (client side), depending on each development situation, making it easier to detect mobile devices.

php-mobile-tablet-detect-class

Mobile Detect is a lightweight PHP class for detecting mobile devices (including tablets). It uses the User-Agent string combined with specific HTTP headers to detect the mobile environment.

You may consider this script as being part of the RESS (Responsive Web Design with Server-Side Component) movement. You can find out more on the topic by reading these articles: Improve Mobile Support With Server-Side-Enhanced Responsive Design and RESS: Responsive Design + Server Side Components.
[Read more…]

Ace: Professional High Performance Code Editor for the Web

Last updated on by Gabriel Livan

ace-editor-preview

Ace is an embeddable code editor developed in JavaScript. It matches the features and performance of native editors including Sublime, Vim and TextMate. It could be easily embedded in any web page and JavaScript application. Ace is maintained as the primary editor for Cloud9 IDE and is the successor of the Mozilla Skywriter (Bespin) project.

It’s very useful if you want to edit code online (e.g. PHP, JavaScript files etc.) through a back-end application that contains code and you need to enhance that editor for a better user experience.
[Read more…]

Format User Input to Match a Specified Pattern: For Web Forms

Last updated on by Gabriel Livan

Sometimes it is useful to format user input as they type. It provides a better experience to the user, it shows that you care about visitor’s input and you optimized your web forms like a professional and this way, it’s very unlikely the user will make any typing mistakes as it clearly shows how the input format should be. Here are 2 scripts that you can use to improve the functionality of your forms:

Masket Input Plugin allows a user to easily type in fixed width input in which you would like them to enter the information in a certain format (dates,phone numbers,social security numbers etc). It’s been tested on Internet Explorer, Firefox, Safari, Opera, and Chrome. A mask is determined by a format made up of mask literals and mask definitions. Any character not in the definitions list below is considered a mask literal. Mask literals will be automatically entered for the user as they type and will not be able to be removed by the user.The following mask definitions are predefined:
a – Represents an alpha character (A-Z,a-z)
9 – Represents a numeric character (0-9)
* – Represents an alphanumeric character (A-Z,a-z,0-9)

jquery-mask-input-plugin-preview

[Read more…]

Fancy & User-Friendly Select DropDowns with Chosen: jQuery Plugin

Last updated on by Gabriel Livan

jquery-chosen-plugin-preview

Chosen is a jQuery plugin that makes long, unwieldy ordinary select boxes much more user-friendly. Comes with a number of options and attributes that allow you to have full control of your select boxes.

The following select types are supported:

  • Standard Select
  • Multiple Select
  • <optgroup> Support
  • Selected and Disabled Support
  • Hide Search on Single Select

There is also available a Prototype version of Chosen.

Setup

Using Chosen is easy as can be.

  1. Download the plugin and copy the chosen files to your app.
  2. Activate the plugin on the select boxes of your choice: $(".chosen-select").chosen();

[Read more…]